<template>
    <!-- 批量续费弹窗 -->
    <drag-modal  :visible="visible" :title="modalTitle" @cancel="onModalClose" width="1200px" >
        <div class="form-search-wrapper" style="min-height:200px;">
            <a-table :scroll="false" :columns="columns" :data-source="dataSource" :footer="false"  bordered :pagination="false">
                 <div slot="renewalTime" slot-scope="text, record,index" >
                    <a-select
                        :value="text"
                        @change="(v)=>onRenewalTimeChange(v,record,index)"
                    >
                        <a-select-option v-for="d in record.renewalTimeList" :key="d.value">
                        {{ d.label }}
                        </a-select-option>
                    </a-select>
                </div>
            </a-table>
            <div class="total-money">总计费用:<span class="money">{{totalAmount}}</span></div>
        </div>
        <div class="sub-d">
            <a-button type="primary" @click="onOk" >确认续费</a-button>
            <a-button @click="onModalClose" style="margin-left:10px;">取消</a-button>
        </div>
    </drag-modal>
</template>

<script>
import moment from "moment";

export default {
    data () {
        const monthSelect = [
            {label:"1个月",value:1},
            {label:"2个月",value:2},
            {label:"3个月",value:3},
            {label:"4个月",value:4},
            {label:"5个月",value:5},
            {label:"5个月",value:5},
            {label:"6个月",value:6},
            {label:"7个月",value:7},
            {label:"8个月",value:8},
            {label:"9个月",value:9},
            {label:"10个月",value:10},
            {label:"11个月",value:11},
            {label:"1年",value:12},
            {label:"2年",value:24},
            {label:"3年",value:36},
        ];
        const yearSelect = [
            {label:"1年",value:1},
            {label:"2年",value:2},
            {label:"3年",value:3},
            {label:"4年",value:4},
            {label:"5年",value:5},
        ];
       const columns = [
             {
                align: "left",
                title: "资源ID/资源名称",
                dataIndex: "propertyUuid",
                width: 150,
                customRender: (text, row, index) => {
                    let showHtml =  <div style="padding: 10px;">
                                        <p style="font-size: 12px;color: #0D88FF;margin-bottom: 0px;">{row.propertyUuid}</p>
                                        <p style="font-size: 12px;margin-bottom: 0px;">{row.propertyName}</p>
                                    </div>;
                    return showHtml;
                },
            },
             {
                align: "left",
                title: "产品规格",
                dataIndex: "productionSpecifications",
                width: 180,
                customRender: (text, row, index) => {
                   let { productionType ,productionSpecifications} = row;
                    let showHtml = null;
                    if(!productionSpecifications)return showHtml;
                    let jsonData = JSON.parse(productionSpecifications);
                    switch(productionType){
                        case "baseProduction":
                            break;
                        case "callSetting":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>套餐名称：{jsonData.name}</p>
                                            <p>月低费：{jsonData.baseCharges} 元</p>
                                            <p>固定分钟数：{jsonData.baseMinutes} 分钟</p>
                                            <p>超出分钟数费率：{jsonData.price} 元/分钟</p>
                                        </div>;    
                            break;
                        case "callAgent":
                            showHtml =  <div style="padding: 1rem 0 0 1rem;">
                                            <p>坐席单价：{jsonData.price} 元/年</p>
                                            <p>坐席个数：{jsonData.number} 个</p>
                                        </div>;
                            break;
                    }
                    return showHtml;
                },
               
            },
            {
                align: "center",
                title: "当前到期时间",
                dataIndex: "endTimeStr",
                width: 80,
                 
            },
            {
                align: "center",
                title: "续费时长",
                dataIndex: "renewalTime",
                width: 80,
                scopedSlots: { customRender: 'renewalTime' },
            },
            {
                align: "center",
                title: "续费后到期时间",
                dataIndex: "renewalEndTime",
                width: 80,
            },
            {
                align: "center",
                title: "单价",
                dataIndex: "minimumRenewalPeriodPrice",
                width: 100,
                customRender: (text, row, index) => {
                    let showHtml = <div style="font-size: 12px;color: #F59A23;font-weight: 700;">{text} 元/{row.renewalUnit}</div>;
                    return showHtml;
                },
            },
             {
                align: "center",
                title: "续费金额",
                dataIndex: "renewalAmount",
                width: 100,
                customRender: (text, row, index) => {
                    let showHtml = <div style="font-size: 12px;color: #F59A23;font-weight: 700;">{text} 元</div>;
                    return showHtml;
                },
            },
        ];
        return {
            monthSelect,
            yearSelect,
            visible: false,
            modalTitle: "",
            columns,
            dataSource: [],
        };
    },
    created(){
       
    },
    computed: {
        totalAmount:function(){
            let { dataSource } = this;
            let amount = 0;
            dataSource.forEach(item=>amount=+item.renewalAmount);
            return amount;
        }
    },
    methods: {
        moment,
        //数据转换
        transformData(data){
            let format = "YYYY-MM-DD"; 
            let {monthSelect,yearSelect} = this;
            data.forEach(item => {
                let {renewalUnit,endTime,minimumRenewalPeriodPrice} = item;
                item.endTimeStr = this.moment(endTime).format(format);
                switch(renewalUnit){
                    case "年":
                        item.renewalTimeList = yearSelect;
                        item.renewalTime = 1;
                        item.renewalEndTime = this.moment(endTime).add(1,"years").format(format);
                        item.renewalAmount = minimumRenewalPeriodPrice * 1;
                        break;
                    case "月":
                        item.renewalTimeList = monthSelect;
                        item.renewalTime = 1;
                        item.renewalEndTime = this.moment(endTime).add(1,"months").format(format);
                        item.renewalAmount = minimumRenewalPeriodPrice * 1;
                        break;
                }
            });
        },
        onModalOpen(openData){
            let { data,modalTitle} = openData;
            this.modalTitle = modalTitle;
            this.transformData(data);
            this.visible = true;
            this.dataSource = data;
        },
        onModalClose(){
            this.visible = false;
              
        },
        onRenewalTimeChange(value,item,index){
            console.log("时长发生变化：",value,item)
             let format = "YYYY-MM-DD"; 
            let {renewalUnit,endTime,minimumRenewalPeriodPrice} = item;
            switch(renewalUnit){
                case "年":
                    item.renewalEndTime = this.moment(endTime).add(value,"years").format(format);
                    break;
                case "月":
                    item.renewalEndTime = this.moment(endTime).add(value,"months").format(format);
                    break;
            }
            item.renewalAmount = minimumRenewalPeriodPrice * value;
            item.renewalTime = value;
            this.$set(this.dataSource,index,item);
        },
        //选中
        onOk(){
            let { dataSource } = this;
            let postData = [];
            dataSource.forEach(item=>{
                let {id,renewalTime} = item;
                let newItem = {
                    id,
                    renewalNumber: renewalTime
                }
                postData.push(newItem);
            })
            this.$emit("callBack",postData);
        }
    }
}
</script>

<style lang="less" scoped>
.sub-d{
    display: flex;
    justify-content: center;
}
.total-money{
    font-size: 12px;
    font-weight: 700;
    margin: 5px;
    .money{
        font-size: 20px;
        color: #F59A23;
    }


}

</style>